
{extend name="public/common"}
{block name="style"}
<script src="__STATIC__/sweetalert/sweetalert.min.js"></script>
<style>
    body{
        background: #f1f1f1;
    }

    .publish-time{
        background: #fff;
        height:12vw;
    }
    .publish-time p{
        text-align: center;
        font-family: "微软雅黑";
        color: #666;
        padding-top: 3.2vw;
        font-size:1.6rem;
    }
    .line{
        height:1.46vw;
        background: #f1f1f1;
    }

    .work-descri p{
        font-size: 1.6rem;
        color: #333;
        font-family: "黑体";
        font-weight: bold;
        margin-bottom: 5px;
    }
    .work-descri{
        padding: 2vw 5vw;
        background: #fff;
        margin-bottom: 1.6vw;
    }
    .work-descri p{
        border-bottom: 1px solid #f1f1f1;
        line-height: 8vw;
    }
    .work-descri>span{
        font-size: 1.3rem;
        color: #d7d7d7;
        display: block;
        line-height: 8vw;
    }
    textarea{
        width:100%;
        height: 70vw;;
        color: #666;
        font-size: 1.4rem;
    }
    textarea::-webkit-input-placeholder{
        color: #999;
        font-size: 1.2rem;
    }
    .submit{
        background: #f1f1f1;
        padding: 4vw 0;
        text-align: center;
    }
    .submit span{
        display: inline-block;
        background: #09a536;
        color: #fff;
        font-size: 1.5rem;
        font-family: "微软雅黑";
        width:25.2vw;
        height:3rem;
        line-height:3rem;
        text-align: center;
        border-radius: 5px;
    }
    .img {
        display: inline-block;
        position: relative;
        width: 20vw;
        height: 20vw;
        margin-left: 5vw;
        margin-bottom: 3vw;
        overflow: hidden;
        background: #d9d9d9;
        border: 2px solid #d9d9d9;
        box-sizing: content-box;
        display: inline-flex;
        justify-content: center;
    }
    .img img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .img span {
        position: absolute;
        right: 0;
        top: 0;
        width: 4vw;
        height: 4vw;
    }
    .img span img {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
    .add {
        width: calc(20vw  + 4px);
        height: calc(20vw  + 4px);
        margin-left: 5vw;
        margin-bottom: 2vw;
        border: 2px solid #d9d9d9;
        font-size: 2rem;
        color: #d9d9d9;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: url("__HOME__/images/common/add.png") no-repeat;
        background-size: 20vw 20vw;
    }
    .closed{
        display: inline-block;
        background: url("__HOME__/images/common/close.png");
        width: 6vw;
        height: 6vw;
        background-size: 6vw 6vw;
        z-index: 999;
        margin-left: -4vw;
        margin-top: -3vw;
    }
    .showbox {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5%;
        background: rgba(0, 0, 0, 0.3);
        display: none;
    }
    .loader {
        position: relative;
        margin: 0 auto;
        width: 100px;
        margin-top: 70%;
    }
    .loader:before {
        content: '';
        display: block;
        padding-top: 50%;
    }

    .circular {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }
        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }
    @keyframes color {
        100%,
        0% {
            stroke: #d62d20;
        }
        40% {
            stroke: #0057e7;
        }
        66% {
            stroke: #008744;
        }
        80%,
        90% {
            stroke: #ffa700;
        }
    }
</style>
{/block}
{block name="body"}
<div class="publish-time">
    <p></p>
</div>
<div class="line"></div>
<div class="work-descri">
    <p>总结内容</p>
    <textarea placeholder="请输入内容..." name="content"></textarea>
    <div class="imgs clear" style="display: flex;">
        <input type="file" class="hide" id="upimg" accept="image/jpg, image/png, image/gif, image/jpeg">
        <div class="add" style="display: inline-block"></div>
    </div>
    <input type="file" class="hide" id="upimg" accept="image/*">
    <span>您最多可上传3张照片</span>
</div>
<div  class="submit">
    <span>确认提交</span>
</div>
<div class="showbox">
    <div class="loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
</div>
{/block}
{block name="script"}
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    $('title').text('点对点教育VIP学员_学习总结');
    //关闭分享
    // function onBridgeReady() {
    //     WeixinJSBridge.call('hideOptionMenu');
    // }
    // if (typeof WeixinJSBridge == "undefined") {
    //     if (document.addEventListener) {
    //         document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    //     } else if (document.attachEvent) {
    //         document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
    //         document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    //     }
    // } else {
    //     onBridgeReady();
    // }
    $(function(){
        var d=new Date(),str='';
        var weekday=new Array(7);
        weekday[1]="星期一";
        weekday[2]="星期二";
        weekday[3]="星期三";
        weekday[4]="星期四";
        weekday[5]="星期五";
        weekday[6]="星期六";
        weekday[0]="星期日";
        str +=d.getFullYear()+'年';
        str +=d.getMonth()+1+'月';
        str +=d.getDate()+'日';
        str +='&nbsp;&nbsp;'+weekday[d.getDay()];
        $(".publish-time p").html(str)
    });

    var	serverId=[],localIds;
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    wx.config({
        debug: false,
        appId: '{$jsSign.appId}', // 必填，公众号的唯一标识
        timestamp: {$jsSign['timestamp']}, // 必填，生成签名的时间戳，切记时间戳是整数型，别加引号
        nonceStr: '{$jsSign.nonceStr}', // 必填，生成签名的随机串
        signature: '{$jsSign.signature}', // 必填，签名，见附录1
        jsApiList: [
            'checkJsApi',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'hideAllNonBaseMenuItem',
        ]
    });

    wx.ready(function () {
        wx.hideAllNonBaseMenuItem();
    });
    var imgArr = [];
    var deleteIds=[];
    $('.add').on('click',function() {
        var lens = $('.img').length;
        var imglen = parseInt(3 - lens);
        wx.chooseImage({
            count: imglen, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                if(localIds.length==3){
                    $('.add').fadeOut();
                }
                for(i=0;i<localIds.length;i++){
                    $('.add').before('<div class="img" style="display: inline-block;position: relative;"><img src=' + localIds[i] + ' data-tab=' + localIds[i] + '></div><span class="closed"></span>');
                    deleteIds.push(localIds[i]);
                }
                syncUpload(localIds);

                $('.imgs').off("click",'.closed').on('click','.closed',function () {
                    var that = $(this);
                    var id = that.prev(".img").find("img").attr('data-tab');//每张图片上都有一个自定义属性保存了图片在后台中的id
                    for (var i = 0; i < deleteIds.length; i++) {
                        if (deleteIds[i] == id) {
                            deleteIds.splice(i, 1);
                            serverId.splice(i, 1);
                        }
                    }
                    that.prev(".img").remove();
                    that.remove();
                    $('.add').show();
                });
                var len = $('.imgs .img').length;
                if(len==3){
                    $('.add').fadeOut();
                }
            }
        });
    });

    //用户选好图片后,点击图片进行预览
    $('.imgs').on('click','.img',function () {
        var currentSrc = $(this).find("img").attr("data-tab");
        //调用预览图片的接口
        wx.previewImage({
            current:currentSrc,//当前显示图片的http连接
            urls: deleteIds//需要预览图片的http连接列表
        });
    });


    var syncUpload = function(localIds){
        var localId = localIds.shift();
        wx.uploadImage({
            localId: localId,
            success: function (res) {
                serverId.push(res.serverId); // 返回图片的服务器端ID
                //其他对serverId做处理的代码
                if(localIds.length > 0){
                    if(isiOS){
                        syncUpload(localIds);
                    }else{
                        setTimeout(function(){
                            syncUpload(localIds);
                        },500)
                    }

                }
            }
        });
    };

    var flag = true;
    $(".submit").click(function() {
        var content = $("textarea[name='content']").val();
        if (content == '' && serverId.length ==0) {
            swal({
                title: ' ',
                text: '请输入总结内容或者上传图片',
                type: 'error',
                allowOutsideClick :false,
                confirmButtonText: '确定'
            });
            return false;
        }
        if (flag){
            flag = false;
            content = utf16toEntities(content);
            $.ajax({
                type: "post",
                url: "{:Url('Journal/publishs')}",
                data: {
                    con: content,
                    pic: serverId
                },
                beforeSend: function (XMLHttpRequest) {
                    $(".showbox").show();
                },
                success: function (data) {
                    $(".showbox").hide();
                    if (data.code == 1) {
                        swal({
                            title: ' ',
                            text: '提交成功',
                            type: 'success',
                            confirmButtonText: '确定',
                            allowOutsideClick :false,
                            timer: 1500
                        },function(){
                            flag = true;
                            wx.closeWindow();
                        });
                    } else {
                        swal({
                            title: ' ',
                            text: '提交失败，请重试',
                            allowOutsideClick :false,
                            type: 'error',
                            confirmButtonText: '确定',
                            timer: 1500
                        })
                        flag = true;
                    }
                }
            })
        }
    });
    var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop
                , totalScroll = el.scrollHeight
                , currentScroll = top + el.offsetHeight;
            if(top === 0) {
                el.scrollTop = 1;
            } else if(currentScroll === totalScroll) {
                el.scrollTop = top - 1;
            }
        });
        el.addEventListener('touchmove', function(evt) {
            if(el.offsetHeight < el.scrollHeight)
                evt._isScroller = true;
        });
    };

    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function(evt) {
        if(!evt._isScroller) {
            evt.preventDefault();
        }
    });
    /**
     * 用于把用utf16编码的字符转换成实体字符，以供后台存储
     * @param  {string} str 将要转换的字符串，其中含有utf16字符将被自动检出
     * @return {string}     转换后的字符串，utf16字符将被转换成&#xxxx;形式的实体字符
     */
    function utf16toEntities(str) {
        var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
        str = str.replace(patt, function(char){
            var H, L, code;
            if (char.length===2) {
                H = char.charCodeAt(0); // 取出高位
                L = char.charCodeAt(1); // 取出低位
                code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法
                return "&#" + code + ";";
            } else {
                return char;
            }
        });
        return str;
    }
</script>

{/block}